<template>
    <view class="bill-container flex fd-c">
        <topBar :back="true">

        </topBar>
        <!-- 内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <view class="flex jc-c" style="width: 510rpx;height: 320rpx;margin: 0 auto;">
                <image :src="BASE_URL + goodsDetail.image" mode="aspectFill"
                    style="width: 510rpx;height: 320rpx;border-radius: 24rpx;"></image>
            </view>

            <view class="points">
                {{ goodsDetail.points }}积分
            </view>
            <view class="name">
                {{ goodsDetail.goods_name }}
            </view>
            <view class="announcement-item flex fd-c" style="gap: 32rpx;">
                <view class="flex">
                    <view class="detail-label" style="margin-right: 120rpx;width: 60rpx;">产品</view>
                    <view class="detail-label">{{ goodsDetail.goods_name }}</view>
                </view>
                <view class="flex">
                    <view class="detail-label" style="margin-right: 120rpx;width: 60rpx;">价值</view>
                    <view class="detail-label">{{ goodsDetail.price }}元</view>
                </view>
                <view class="flex">
                    <view class="detail-label" style="margin-right: 120rpx;width: 60rpx;">物品</view>
                    <view class="detail-label">{{ goodsDetail.type == 1 ? '电子卡' : '实物卡' }}</view>
                </view>
                <view class="flex">
                    <view class="detail-label" style="margin-right: 120rpx;width: 60rpx;flex-shrink: 0;">购物</view>
                    <view class="detail-label">{{ goodsDetail.remark }}</view>
                </view>
                <view class="flex">
                    <view class="detail-label" style="margin-right: 120rpx;width: 60rpx;flex-shrink: 0;">说明</view>
                    <view class="detail-label">{{ goodsDetail.oprator }}</view>
                </view>

            </view>
            <view class="shop-notice">
                商品须知
            </view>
            <view class="shop-notice-content">
                <rich-text :nodes="goodsDetail.content"></rich-text>
            </view>
        </scroll-view>
        <view class="bottom-button" @click="selectCard">
            <view class="bottom-button-item">
                <text class="MiSans">{{ goodsDetail.points }}</text> <text style="font-size: 24rpx;">积分</text> 立即兑换
            </view>
        </view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/api'
import { BASE_URL } from '@/utils/request'
import { useUserStore } from '@/store/index.js'
const userStore = useUserStore()
const goodsDetail = ref({})
onLoad((options) => {
    api.getGoodsDetail({
        good_id: options.id
    }).then(res => {
        goodsDetail.value = res.data
    })
})

const selectCard = (card) => {

    uni.showModal({
        title: '确认兑换',
        content: `确定要兑换吗？`,
        success: (res) => {
            if (res.confirm) {
                console.log(goodsDetail.value)
                api.exchangePoints({
                    goods_id: goodsDetail.value.id,
                    nums: 1,
                    user_id: userStore.userInfo.id
                }).then(res => {
                    uni.navigateTo({
                        url: `/pages/shop/success?data=${JSON.stringify(res.data)}`
                    })
                    uni.showToast({
                        title: '兑换成功',
                        icon: 'success'
                    })
                })
            }
        }
    })
}

</script>

<style scoped>
.bill-container {
    height: 100vh;
    background-color: #F7F7F7;
    position: relative;
    display: flex;
    flex-direction: column;
}

.scrollable-content {
    padding: 32rpx;
    box-sizing: border-box;
}

.points {
    font-size: 32rpx;
    color: #0F50DC;
    margin-bottom: 47rpx;
    margin-top: 80rpx;
}

.name {
    font-size: 40rpx;
    color: #333;
    margin-bottom: 32rpx;
    font-weight: 600;
}

.announcement-item {
    padding: 46rpx 32rpx;
    background-color: #fff;
    border-radius: 32rpx;
    margin-bottom: 24rpx;
}

.detail-label {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
}

.shop-notice {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-top: 32rpx;
    margin-bottom: 32rpx;
}

.shop-notice-content {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);
}

.bottom-button {
    background-color: #fff;
    padding: 24rpx 0;
    /* 适配苹果手机安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: 24rpx;
}

.bottom-button-item {
    background-color: #0F50DC;
    font-size: 36rpx;
    color: #fff;
    font-weight: 500;
    padding: 17rpx 70rpx;
    width: 440rpx;
    margin: 0 auto;
    border-radius: 80rpx;
    text-align: center;
}
</style>
